<template>
  <a-card :bordered="false">
    <!-- table区域-begin -->
    <div>
      <vxe-grid
      id="SalaryItems"
      ref="vxeTable"
      v-bind="options"
      :columns="columns"
      :data="dataSource"
      @toolbar-button-click="toolbarButtonClickEvent"
      @checkbox-all="onSelectChange"
      @checkbox-change="onSelectChange"
    >
      <template v-slot:toolbar_buttons>
        <a-button type="primary" icon="plus" style="margin:0px 8px 0px 0px;" @click="handleAdd">新增</a-button>
<!--        <a-button type="primary" icon="download" @click="handleExportXls('任务模板')">导出</a-button>-->
        <a-button type="primary" icon="download" @click="downloadFile('任务模板.xls')">下载任务模板</a-button>
        <a-dropdown v-if="selectionRows.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
          </a-menu>
          <a-button>批量操作<a-icon type="down" /></a-button>
        </a-dropdown>
      </template>
      <template v-slot:action="{ row }">
        <a v-if="isCanEdit(row)" @click="handleEdit(row)">编辑</a>
        <a-divider v-if="isCanEdit(row)" type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a-upload name="file" :showUploadList="false" :data="{'projectCode':row.projectCode}" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
                导入任务
              </a-upload>
            </a-menu-item>
            <a-menu-item>
              <a @click="handleTask(row)">任务列表</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="handleDetail(row)">详情</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="handleOnlineUrlShow(row)">任务地址</a>
            </a-menu-item>
            <a-menu-item  v-if="isCanEdit(row)">
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                <a>删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>
      <template v-slot:pager>
        <vxe-pager
          :layouts="layouts"
          :current-page.sync="ipagination.currentPage"
          :page-size.sync="ipagination.pageSize"
          :total="ipagination.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template>
    </vxe-grid>
    </div>
    <project-list-modal ref="modalForm" @ok="handleFormSuccess"></project-list-modal>
    <!-- 任务页面配置地址 -->
    <config-url-modal :url="onlineUrl" ref="onlineUrl"></config-url-modal>
  </a-card>
</template>

<script>
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { filterObj } from '@/utils/util'
import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import ProjectListModal from './modal/ProjectListModal'
import { mapGetters } from 'vuex'
import moment from 'moment'
import ConfigUrlModal from '@/components/custom/ConfigUrlModal'
export default {
  name: 'ProjectList',
  mixins: [VxeTableMixin],
  components: {
    ProjectListModal,
    ConfigUrlModal
  },
  data() {
    return {
      columns: [// 表头
        { type: 'checkbox', width: 50 },
        { type: 'seq', width: 60 },
        { title: '项目名称', field: 'projectName' },
        { title: '项目编码', field: 'projectCode' },
        { title: '开始', field: 'startTime' },
        { title: '结束', field: 'endTime' },
        { title: '过期（天）', field: 'timeout',
          slots: { default: ({ row }) => {
            return this.diff(row)
          } }
        },
        { title: '项目状态', field: 'projectStatus_dictText' },
        { title: '进度', field: 'projectProgress' },
        { title: '项目经理', field: 'projectManager_dictText' },
        { title: '归属部门', field: 'departCode_dictText' },
        { title: '项目类型', field: 'projectType_dictText' },
        {
          title: '操作',
          fixed: 'right',
          width: 147,
          slots: { default: 'action' }
        }
      ],
      url: {
        list: '/pms/project/list',
        delete: '/pms/project/delete',
        deleteBatch: '/pms/project/deleteBatch',
        importExcelUrl: 'pms/task/importTasksByExcel',
        exportXlsUrl: '/pms/task/exportModelXls',
      },
      onlineUrl: '',
      superQueryParams: encodeURIComponent(JSON.stringify([ // 高级查询条件
        { 'rule': 'eq', 'type': 'text', 'val': this.userInfo().username, 'field': 'taskReviewer' },
        { 'rule': 'eq', 'type': 'text', 'val': this.userInfo().username, 'field': 'taskDirector' }
      ])),
      superQueryMatchType: 'or'// 高级查询拼接方式
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    ...mapGetters(['userInfo']),
    handleTask(data) {
      this.$router.push({ path: '/project/ProjectTask/' + data.projectCode })
    },
    isCanEdit(data) {
      const username = this.userInfo().username
      const projectManager = data.projectManager ? data.projectManager.split(',') : []
      const projectAssistant = data.projectAssistant ? data.projectAssistant.split(',') : []
      if (projectManager.indexOf(username) >= 0 || projectAssistant.indexOf(username) >= 0) {
        return true
      } else {
        return false
      }
    },
    handleFormSuccess() {
      this.loadData()
    },
    diff(row) {
      if (row.projectStatus !== '3') {
        const endTime = moment(row.endTime)
        const startTime = moment(new Date())
        const timeout = endTime.diff(startTime, 'day')
        return timeout > 0 ? timeout : ''
      } else {
        return ''
      }
    },
    handleOnlineUrlShow(record) {
      this.onlineUrl = `/project/ProjectTask/${record.projectCode}`
      this.$refs.onlineUrl.onlineUrlVisible = true
    },
    getQueryParams() {
      // 获取查询条件
      const sqp = {}
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
        sqp['superQueryMatchType'] = this.superQueryMatchType
      }
      var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters, this.getQuery())
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    getQuery() {
      const data = [
        { 'rule': 'eq', 'type': 'text', 'val': this.userInfo().username, 'field': 'projectManager' },
        { 'rule': 'right_like', 'type': 'text', 'val': this.userInfo().username + ',', 'field': 'projectAssistant' },
        { 'rule': 'like', 'type': 'text', 'val': ',' + this.userInfo().username + ',', 'field': 'projectAssistant' },
        { 'rule': 'left_like', 'type': 'text', 'val': ',' + this.userInfo().username, 'field': 'projectAssistant' },
        { 'rule': 'eq', 'type': 'text', 'val': this.userInfo().username, 'field': 'projectAssistant' },
        { 'rule': 'right_like', 'type': 'text', 'val': this.userInfo().username + ',', 'field': 'projectMember' },
        { 'rule': 'like', 'type': 'text', 'val': ',' + this.userInfo().username + ',', 'field': 'projectMember' },
        { 'rule': 'left_like', 'type': 'text', 'val': ',' + this.userInfo().username, 'field': 'projectMember' },
        { 'rule': 'eq', 'type': 'text', 'val': this.userInfo().username, 'field': 'projectMember' }
      ]
      return {
        superQueryMatchType: 'or',
        superQueryParams: encodeURIComponent(JSON.stringify(data))
      }
    },
  }
}
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
